<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>按钮插件</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="margin: 100px;">
<!-- 
	1.基本
		1)	data-toggle="button" 			//激活状态切换	
		2)	autocomplete="off" 				//解决火狐的【兼容问题】
			【兼容问题】火狐下，多次页面加载时，按钮可能保持表单的禁用或选择状态.【强烈要求加上】

			JS方法：即不用data-toggle="button"
				$('按钮').on('click', function () {
					$(this).button('toggle')
				})
	
	2.单选按钮
		1)	.btn-group 						//对最外层容器添加。作用是组合按钮，不留空隙
		2)	.btn btn-primary 				//对label添加(btn-success/info/warning/danger)
		3)	data-toggle="buttons" 			//对最外层容器添加。button有s,作用是将默认的圈圈去掉
		4)	.active 						//对label添加

	3.复选按钮
		1)	在单选框的基础上去掉data-toggle="buttons"即可

	4.加载状态
		1)	data-loading-text="Loading..." 						//其中的loading是一个自定义的名称，想起什么名字就起什么名字
		2) 	var re = $('button').button('loading') 				//这里的loading就是自定义的那么名称
		3)	re.button('reset') 									//将按钮重置可再点击状态

 -->

	<!-- 基本 -->
	<button class="btn btn-default" data-toggle="button" autocomplete="off">按钮</button>
	<!-- 基本test -->
	<button id="test" class="btn btn-primary" autocomplete="off">TEST</button>

	<!-- 单选按钮 -->
	<div class="btn-group" data-toggle="buttons">
		<label for="man" class="btn btn-info active" autocomplete="off">
			<input id="man" type="radio" name="sex" value="男" checked>男
		</label>
		<label for="woman" class="btn btn-info" autocomplete="off">
			<input id="woman" type="radio" name="sex" value="女">女
		</label>
	</div>

	<!-- 复选按钮 -->
	<div class="btn-group" data-toggle="buttons">
		<label for="html" class="btn btn-warning active" autocomplete="off">
			<input id="html" type="checkbox" name="web" value="html" checked>HTML
		</label>
		<label for="bootstrap" class="btn btn-warning" autocomplete="off">
			<input id="bootstrap" type="checkbox" name="web" value="Bootstrap">Bootstrap
		</label>
		<label for="Javascrip" class="btn btn-warning" autocomplete="off">
			<input id="Javascrip" type="checkbox" name="web" value="Javascrip">Javascrip
		</label>
	</div>
	
	<!-- 加载状态 -->
	<button class="btn btn-default" data-loading-text="正在上传..." autocomplete="off">开始上传</button>


	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
	<script>
		//基本
		$('#test').on('click', function () {
			$(this).button('toggle');
		})

		//加载状态
		/*$('button').on('click', function () {
			// var btn = $(this);不需要再单独这句话，可以直接写在下面那句
			var btn = $(this).button('loading');

			setTimeout(function () {
				btn.button('reset') 			//
			}, 1000);
		})*/
	</script>
</body>
</html>